ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: ;
}

ul li {
  display: white;
  position: relative;
  float: left;
  background: ;
}

li ul { display: none; }

ul li a {
  display: block;
  padding: .5em;
  text-decoration: none;
  white-space: nowrap;
  color: block;
}

ul li a:hover { background: #fff; }

li:hover > ul {
  display: block;
  position: absolute;
}

li:hover li { float: none; }


li:hover a { background: ; }

li:hover li a:hover { background:#fff ; }

.main-navigation li ul li { border-top: 0; }

ul ul ul {
  left: 100%;
  top: 0;
}

ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both; }

 

.menu {
  background-color: #fff;
  width: 100%;
  height: 60px;
}

.menu ul {
  background-color: #fff;
  text-align: center;
}

.menu ul li ul {
  display: none;
  opacity: 0;
  position: absolute;
  top: 60px;
  width: 100%;
  background-color: #fff;
  transform: all .5s;
}

.menu ul li ul:hover {
  display: block;
  opacity: 1;
}

.menu ul li ul li { width: 100%; }

.menu ul li ul li ul {
  position: absolute;
  top: 0;
  left: 100%;
}

.menu li {
  width: 25%;
  float: left;
  position: relative;
}

.menu li a {
  display: block;
  color: #666;
  line-height: 60px;
}

.menu li a:hover { background-color: #f0f0f0; }

.menu li a:hover + ul {
  display: block;
  opacity: 1;
}